<template>
	<div class="page">
		<div class="top-view">
			<!-- 按钮 -->
			<div class="btns-view c-panel">
				<div>
					<Button 
	    					type="primary" 
	    					style="margin-right: 10px;"
	    					:loading="isWorksLoading"
	    					@click="click2RefreshWorks">
	    					刷新作品
					</Button>
	    				<Button 
	    					type="primary" 
	    					:loading="isEtagsLoading"
	    					@click="click2RefreshEtags">
	    					刷新职位
	    				</Button>
				</div>
				
				<div style="margin-left: 50px;">
	    				<Button 
	    					type="ghost" 
	    					@click="click2Sort"
	    					:loading="isSortLoading">
	    					{{sortable?'保存排序':'选择排序'}}
	    				</Button>
	    				<Button 
	    					type="ghost" 
	    					v-if="sortable"
	    					@click="click2CancelSort">
	    					取消排序
	    				</Button>
    				</div>
    				
    				<div style="margin-left: 50px">
	    				<Button 
	    					type="success" 
	    					style="margin-right: 10px;"
	    					:loading="isSubmitLoading"
	    					v-if="formatStatus(0)"
	    					@click="click2SubmitWorks">
	    					提交审核
					</Button>
					
					<Button 
	    					type="success" 
	    					style="margin-right: 10px;"
	    					:loading="isPubLoading"
	    					v-if="formatStatus(1)"
	    					@click="click2PubWorks">
	    					发布作品
					</Button>
					
	    				<Button 
	    					type="error" 
	    					:loading="isDeleteLoading"
	    					v-if="formatStatus(2)"
	    					@click="click2DelWorks">
	    					删除作品
	    				</Button>
	    			</div>
    				
			</div>
		</div>
		<div class="data-view">
			<div class="works-view c-panel">
				<CWorksInfoView
					:data="worksData">
				</CWorksInfoView>
			</div>
			
			<div class="tags-view">
				<!-- 职员 -->
				<div class="tags-item-view c-panel" v-for="(etagObj, index) in etagData">
					<h1 class="w-tags-title">{{etagObj.title}}</h1>
					<CEntityTagListView 
						:data="etagObj"
						:sortable="sortable"
						@on-action="action2ListView">
					</CEntityTagListView>
					
					<div class="add-etag-view c-panel">
						<CEntityTagAddView 
							:data="index == 0? staffData : actorData"
							@on-submit="submit2AddEntityTag">
						</CEntityTagAddView>
					</div>
				</div>
			</div>
		</div>
		<!--<Spin fix size="large" v-if="isPageLoading">
            <Icon type="load-c" size=18 class="c-loading"></Icon>
            <div>加载中...</div>
        </Spin>-->
        
        <!--实体标签编辑-->
        <CEntityTagEditModal
        		ref="etagEditModal"
        		:data="etagData2Edit"
			@on-submit="submit2EditEntityTag">
        </CEntityTagEditModal>
        
        <!--用户实体标签编辑框-->
		<CEntityTag2UserEditModal
			ref="uetagEditModal"
			:data="uetagData2Edit"
			@on-submit="submit2EditUserEntityTag"
			@on-del="submit2DelUserEntityTag">
		</CEntityTag2UserEditModal>
	</div>
</template>

<script>
	import CWorksInfoView from '@/pages/works/view/CWorksInfoView';
	import CEntityTagListView from '@/pages/works/view/CEntityTagListView';
	
	import CEntityTagAddView from '@/pages/works/view/CEntityTagAddView';
	
	import CEntityTagEditModal from '@/pages/works/view/CEntityTagEditModal';
	import CEntityTag2UserEditModal from '@/pages/works/view/CEntityTag2UserEditModal';
	
	import WorksService from '@/services/WorksService.js';
	import EtagService from '@/services/EtagService.js';

	const $worksService = WorksService();
	const $etagService = EtagService();
	
	const $data = {
		isWorksLoading: false,
		isEtagsLoading: true,
		isPubLoading: false,
		isSubmitLoading: false,
		isDeleteLoading: false,
		wid : null,
		worksData : {//作品数据
			poster: '',
			attribute : {}
		},
		etagData : [],
		//排序
		sortable: false,
		isSortLoading: false,
		
		//新增
		staffData: {
			type : 1,
			isSubmit : false,
			data: {
				groupName: '',
				etNames: [''],
				isCompany: false,
				isSensitive: false,
				name: ''
			}
		},
		
		actorData : {
			type : 2,
			isSubmit : false,
			data: {
				groupName: '',
				etNames: [''],
				isSensitive: false,
				name: ''
			}
		},
		//编辑etag
		etagData2Edit: {
			isShow: false,
			isSubmit: false,
			index: 0,
			data: {
				etId: null,
				groupName: '',
				etNames: [''],
				isCompany: false,
				etType: 1,
				type: 1
			}
		},
		//新建或编辑用户实体标签
		uetagData2Edit: {
			gindex: 0,
			cindex: 0,
			etag: {},
			actionType: 1,//1:add,2:edit
			isShow: false,
			isSubmit: false,
			isDel: false,
			data : {
				uetId: null,
				isSensitive: false,
				name: '',
				roleName: ''
			}
		}
	}
export default {
		data() {
			return $data;
		},
		mounted: function() {
			var $this = this;
			$this.etagData = [];
			$this.wid = this.$route.query.wid;
			$this.getWorksDetail();
			$this.getWorksTags();
		},
		components: {
			CWorksInfoView, 
			CEntityTagListView,
			CEntityTagAddView, 
			CEntityTagEditModal,
			CEntityTag2UserEditModal
		},
		methods: {
			action2ListView(type, data) {//listview action
				var $this = this;
				if(type == 'edit') {//编辑
					$this.openModal2EditEntityTag(data.etag, data.index);
				} else if(type == 'addUEtag') {
					$this.openModal2AddUserEntityTag(data.etag, data.gindex);
				} else if(type == 'editUEtag') {
					$this.openModal2EditUserEntityTag(data.etag, data.uetag, data.gindex, data.cindex);
				} else if(type == 'sort') {
					var etag = data.etag;
					var userEntityTags = etag.userEntityTags;
					var sorts = [];
					var sort = 0;
					for(var i=0; i<userEntityTags.length; i++) {
						var userEtId = userEntityTags[i].userEtId;
						sorts.push({
							id: userEtId,
							sort: sort
						});
						sort++;
					}
					$this.editSort2UserEntityTag(etag, sorts);
				}
			},
			click2RefreshWorks() {//刷新
				this.getWorksDetail();
			},
			click2RefreshEtags() {//刷新
				this.getWorksTags();
			},
			click2SubmitWorks() {//提交
				var $this = this;
				var wid = $this.worksData.wid;
				$this.$Modal.confirm({
                    title: "提示",
                    content: "您确定提交审核作品吗？",
                    onOk() {
                    		$this.isSubmitLoading = true;
						$worksService.submit2Verify(wid)
						.then(function(response) {
							var res = response.data;
							var code = res.rescode;
							if(code == 100) {
								$this.worksData.status = 2;
								$this.$Message.success(res.msg);
							} else {
								$this.$Message.error(res.msg);
							}
							$this.isSubmitLoading = false;
						}, function(error) {
							$this.$Message.error("网络或服务器异常！");
							$this.isSubmitLoading = false;
						})
                    }
                });
			},
			click2PubWorks() {//提交
				var $this = this;
				var wid = $this.worksData.wid;
				$this.$Modal.confirm({
                    title: "提示",
                    content: "您确定发布作品吗？",
                    onOk() {
                    		$this.isPubLoading = true;
						$worksService.publish(wid)
						.then(function(response) {
							var res = response.data;
							var code = res.rescode;
							if(code == 100) {
								$this.worksData.status = 1;
								$this.$Message.success(res.msg);
							} else {
								$this.$Message.error(res.msg);
							}
							$this.isPubLoading = false;
						}, function(error) {
							$this.$Message.error("网络或服务器异常！");
							$this.isPubLoading = false;
						})
                    }
                });
			},
			click2DelWorks() {//删除
				var $this = this;
				var wid = $this.worksData.wid;
				$this.$Modal.confirm({
                    title: "提示",
                    content: "您确定删除作品吗？",
                    onOk() {
                    		$this.isDeleteLoading = true;
						$worksService.delWorks(wid)
						.then(function(response) {
							var res = response.data;
							var code = res.rescode;
							if(code == 100) {
								$this.$router.back(-1)
								$this.$Message.success(res.msg);
							} else {
								$this.$Message.error(res.msg);
							}
							$this.isDeleteLoading = false;
						}, function(error) {
							$this.$Message.error("网络或服务器异常！");
							$this.isDeleteLoading = false;
						})
                    }
                });
			},
			click2Sort: function() {
				var $this = this;
				if($this.sortable) {
					var sorts = [];
					for(var i=0; i<$this.etagData.length; i++) {
						var sort = 1;
						for(var j=0; j<$this.etagData[i].data.length; j++) {
							var etId = $this.etagData[i].data[j].etId;
							sorts.push({
								id: etId,
								sort: sort
							});
							sort++;
						}
					}
					$this.editSort2EntityTag(sorts);
				} else {
					$this.sortable = !$this.sortable;
				}
			},
			click2CancelSort: function() {
				this.sortable = false;
			},
			//添加新的职员实体标签
			submit2AddEntityTag(form) {
				var $this = this;
				var data = form.data;
				var type = form.type;
				var etags = type == 1 ? this.etagData[0] : this.etagData[1];
				var sort = etags.data.length + 1;
				var params = {
					worksId: $this.wid,
					groupName: data.groupName,
					etNames: JSON.stringify(data.etNames),
					fname: data.etNames[0],
					etType: data.isCompany? 2 : 1,
					isSensitive: data.isSensitive? 1: 0,
					type: type,
					roleName: data.roleName,
					name: data.name,
					sort: sort
				}
				$etagService.addEntityTag(params)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						res.data.sort = sort;
						res.data.sortable = false;
						res.data.sortLoading = false;
						etags.data.push(res.data);
						
						//回复数据
						data.etNames[0] = '';
						data.isCompany = false,
						data.isSensitive = false,
						data.name = '';
						data.roleName = '';
						
						$this.$Message.success(res.msg);
					} else {
						$this.$Message.error(res.msg);
					}
					form.isSubmit = false;
				}, function(error) {
					$this.$Message.error("网络或服务器异常！");
					form.isSubmit = false;
				});
			},
			//编辑的实体标签
			submit2EditEntityTag(form) {
				var $this = this;
				var data = form.data;
				var index = form.index;
				var etags = data.type == 1 ? this.etagData[0] : this.etagData[1];
				var params = {
					etId: data.etId,
					groupName: data.groupName,
					etNames: JSON.stringify(data.etNames),
					fname: data.etNames[0],
					etType: data.isCompany ? 2 : 1
				}
				//请求服务器
				$etagService.editEntityTag(params)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						console.log(res.data);
						var tag = res.data;
						var etag = etags.data[index];
						etag.groupName = tag.groupName;
						etag.etNames = tag.etNames;
						etag.etNamesCode = tag.etNamesCode;
						etag.fname = tag.fname;
						etag.fnameCode = tag.fnameCode;
						etag.atId = tag.atId;
						etag.etType = tag.etType;
						if(data.type == 1) {
							etag.isCompany = tag.isCompany;
						}
						$this.$Message.success(res.msg);
					} else {
						$this.$Message.error(res.msg);
					}
					form.isSubmit = false;
					form.isShow = false;
				}, function(error) {
					$this.$Message.error("网络或服务器异常！");
					form.isSubmit = false;
				});
			},
			//添加新的职员实体标签
			submit2EditUserEntityTag(form) {
				var $this = this;
				var data = form.data;
				var index = form.cindex;
				var etag = form.etag;
				var params = {
					uetId: data.uetId,
					etId: etag.etId,
					name: data.name,
					roleName: data.roleName,
					isSensitive: data.isSensitive? 1 : 0,
					sort: form.actionType == 1 ? etag.userEntityTags.length : 0 
				}
				form.isSubmit = true;
				//请求服务器
				$etagService.editUserEntityTag(params)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						if(form.actionType == 1) {
							etag.userEntityTags.push(res.data);
						} else {
							etag.userEntityTags.splice(index, 1, res.data);
						}
						$this.$Message.success(res.msg);
						if(form.actionType == 1) {//如果是新建
							$this.uetagData2Edit.actionType = 1;
							$this.uetagData2Edit.isShow = true;
							$this.uetagData2Edit.isSubmit = false;
							$this.uetagData2Edit.isDel = false;
							$this.uetagData2Edit.gindex = form.gindex;
							$this.uetagData2Edit.etag = form.etag,
							$this.uetagData2Edit.data = {
								uetId: '',
								name: '',
								isSensitive: false,
								roleName: ''
							}
							setTimeout(function() {
								$this.$refs['uetagEditModal'].focusName();
							}, 100);
						} else {
							form.isShow = false;
						}
					} else {
						$this.$Message.error(res.msg);
					}
					form.isSubmit = false;
				}, function(error) {
					form.isSubmit = false;
				});
			},
			//删除用户实体标签
			submit2DelUserEntityTag(form) {
				var $this = this;
				var data = form.data;
				var gindex = form.gindex;
				var cindex = form.cindex;
				var etag = form.etag;
				var etags = etag.type == 1 ? this.etagData[0] : this.etagData[1];
				var uetId = form.data.uetId;
				$this.$Modal.confirm({
                    title: "删除用户实体标签",
                    content: "您确定要删除用户实体标签吗？",
                    onOk() {
                    		form.isDel = true;
						$etagService.delUEntityTag(uetId)
						.then(function(response) {
							var res = response.data;
							var code = res.rescode;
							if(code == 100) {
								if(etag.userEntityTags.length == 1) {
									etags.data.splice(gindex, 1);
								} else {
									etag.userEntityTags.splice(cindex, 1);
								}
								//局部动画
								$this.$Message.success(res.msg);
							} else {
								$this.$Message.error(res.msg);
							}
							form.isDel = false;
							form.isShow = false;
						}, function(error) {
							$this.$Message.error("网络或服务器异常！");
							form.isDel = false;
						})
                    }
                });
			},
			//打开编辑实体标签的窗口
			openModal2EditEntityTag(etag, index) {
				var $this = this;
				$this.etagData2Edit.isShow = true;
				$this.etagData2Edit.isSubmit = false;
				$this.etagData2Edit.index = index;
				$this.etagData2Edit.data = {
					etId: etag.etId,
					groupName: etag.groupName,
					etNames: JSON.parse(etag.etNames),
					isCompany: etag.etType == 2,
					etType: etag.etType,
					type: etag.type
				};
				setTimeout(function() {
					$this.$refs['etagEditModal'].focusName();
				}, 100);
			},
			//打开新增用户实体标签
			openModal2AddUserEntityTag(etag, gindex) {
				var $this = this;
				$this.uetagData2Edit.actionType = 1;
				$this.uetagData2Edit.isShow = true;
				$this.uetagData2Edit.isSubmit = false;
				$this.uetagData2Edit.isDel = false;
				$this.uetagData2Edit.gindex = gindex;
				$this.uetagData2Edit.etag = etag,
				$this.uetagData2Edit.data = {
					uetId: '',
					name: '',
					isSensitive: false,
					roleName: ''
				}
				setTimeout(function() {
					$this.$refs['uetagEditModal'].focusName();
				}, 100);
			},
			//打开编辑用户实体标签的窗口
			openModal2EditUserEntityTag(etag, uetag, gindex, cindex) {
				var $this = this;
				$this.uetagData2Edit.actionType = 2;
				$this.uetagData2Edit.isShow = true;
				$this.uetagData2Edit.isSubmit = false;
				$this.uetagData2Edit.isDel = false;
				$this.uetagData2Edit.gindex = gindex;
				$this.uetagData2Edit.cindex = cindex;
				$this.uetagData2Edit.etag = etag,
				$this.uetagData2Edit.data = {
					uetId: uetag.userEtId,
					name: uetag.name,
					isSensitive: uetag.isSensitive == 1,
					roleName: uetag.roleName
				}
				setTimeout(function() {
					$this.$refs['uetagEditModal'].focusName();
				}, 100);
			},
			getWorksDetail() {
				var $this = this;
				$this.isWorksLoading = true;
				$worksService.getWorksDetail($this.wid)
					.then(function(response) {
						var res = response.data;
						var code = res.rescode;
						if(code == 100) {
							var data = res.data;
							console.log(data);
							$this.worksData = data;
						}
						$this.isWorksLoading = false;
					}, function(error) {
						console.log(error);
						$this.isWorksLoading = false;
					});
			},
			getWorksTags() {
				var $this = this;
				$this.isEtagsLoading = true;
				$data.etagData = [];
				$etagService.getTags2Works($this.wid)
					.then(function(response) {
						var res = response.data;
						var code = res.rescode;
						if(code == 100) {
							var data = res.data;
							for(var i=0; i<data.staffs.length; i++) {
								data.staffs[i].sort = i + 1;
								data.staffs[i].sortable = false;
								data.staffs[i].sortLoading = false;
							}
							for(var i=0; i<data.actors.length; i++) {
								data.actors[i].sort = i + 1;
								data.actors[i].sortable = false;
								data.actors[i].sortLoading = false;
							}
							$data.etagData.push({
								title: '职员',
								data: data.staffs,
								sortable: false
							});
							$data.etagData.push({
								title: '演员',
								data: data.actors,
								sortable: false
							});
						}
						$this.isEtagsLoading = false;
					}, function(error) {
						$this.isEtagsLoading = false;
					});
			},
			editSort2EntityTag(sorts) {
				var $this = this;
				//保存排序
				$this.isSortLoading = true;
				$etagService.editSort2EntityTag(JSON.stringify(sorts))
					.then(function(response) {
						var res = response.data;
						var code = res.rescode;
						if(code == 100) {
							$this.$Message.success(res.msg);
						} else {
							$this.$Message.error(res.msg);
						}
						$this.isSortLoading = false;
						$this.sortable = false;
					}, function(error) {
						$this.$Message.error("网络异常，请稍候再试！");
						$this.isSortLoading = false;
					});
			},
			editSort2UserEntityTag(etag, sorts) {
				var $this = this;
				//保存排序
				etag.sortLoading = true;
				$etagService.editSort2UEntityTag(JSON.stringify(sorts))
					.then(function(response) {
						var res = response.data;
						var code = res.rescode;
						if(code == 100) {
							$this.$Message.success(res.msg);
						} else {
							$this.$Message.error(res.msg);
						}
						etag.sortLoading = false;
						etag.sortable = false;
					}, function(error) {
						$this.$Message.error("网络异常，请稍候再试！");
						etag.sortLoading = false;
					});
			},
			formatStatus(type) {
				var $this = this;
				var account = $this.$store.getters.account;
				var roleType = account.roleType;
				var status = $this.worksData.status;
				
				if(type == 0 || type == 2) {//提交
					if(status == 0) {
						return true;
					}
				} else if (type == 1) {
					if(status == 2 && (roleType == 1 || roleType == 2 || roleType == 3)) {
						return true;
					}
				}
				return false;
			}
		}
	}
</script>

<style scoped="scoped">
	.page {
	}
	
	.top-view {
		position: fixed;
		left: 210px;
		top: 60px;
		right: 10px;
		z-index: 3;
	}
	
	.btns-view {
		max-width: 1040px;
		margin: 0 auto;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		border-radius: 0px 0px 5px 5px;
		border-top: none;
	}
	.data-view {
		margin: 0 auto;
		max-width: 1040px;
		margin-top: 75px;
	}
	.works-view {
		margin-bottom: 10px;
	}
	
	.tags-view {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
	}
	
	.tags-item-view {
		flex: 1;
		-webkit-flex: 1;
	}
	
	.tags-item-view:first-child {
		margin-right: 5px;
	}
	.tags-item-view:last-child {
		margin-left: 5px;
	}
	
	.w-tags-title {
		text-align: center;
		font-size: 18px;
		padding: 10px;
		background-color: #F5F5F5;
		margin-top: 10px;
	}
	
	.add-etag-view {
		margin-top: 10px;
	}
</style>